<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="static/index.css">
    <script type="text/javascript" src="static/qs.min.js"></script>
    <title>案例信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            background: #00499e;
        }

        #app {
            padding: 20px;
            border: 15px solid #00499e;
            border-radius: 25px;
            background: white;
            min-height: 100%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            max-width: 650px;
            margin: auto;
        }

        .page-header {
            color: #333;
            margin-left: -10px;
            margin-bottom: 20px;
            font-size: 16px;
            text-align: center;
        }

        .form-select {
            width: 100%;
            height: 40px;
        }

        .form-input {
            width: 100%;
            height: 40px;
        }

        #app .form-date {
            width: 100%;
        }

        .form-btn {
            width: 100%;
            max-width: 400px;
            margin-top: 10px;
        }

        .form-card {
            width: 200px;
            height: 160px;
            border: 1px solid #efefef;
            display: inline-block;
            padding: 10px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            border-radius: 8px;
            -webkit-border-radius: 8px;
            vertical-align: top;
            line-height: 26px;
            margin-right: 15px;
            margin-bottom: 10px;
        }

        .form-card .el-icon-plus {
            font-size: 30px;
            margin-top: 55px;
            margin-left: 75px;
            color: #1379ff;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="page-header">
        <i style="float: left;font-size: 20px;color:#1379ff;margin-left: 22px;cursor:pointer;" @click="back"
           class="el-icon-back"></i>
        <i class="el-icon-document" style="margin-right: 10px;color: #1279ff;"></i>{{title}}
    </div>
    <el-row :gutter="20">
        <el-form ref="form" label-width="100px" label-position="right" :model="formData" :rules="rules">
            <el-col :span="24">
                <el-form-item prop="xmdm" :label="formMap['xmdm']">
                    <el-select :disabled="disabled" class="form-select" v-model="formData.xmdm" placeholder="请选择项目代码">
                        <el-option v-for="xx of projectCodes" :key="xx.xmdm" :value="xx.xmdm" :label="xx.xmmc"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item prop="almc" :label="formMap['almc']">
                    <el-input :disabled="disabled" v-model="formData.almc" class="form-input" type="text"
                              placeholder="请输入案例名称" maxlength="20"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="disabled">
                <el-form-item prop="qxdmmc" :label="formMap['qxdmmc']">
                    {{formData.qxdmmc}}
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="disabled">
                <el-form-item prop="xxdmmc" :label="formMap['xxdmmc']">
                    {{formData.xxdmmc}}
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="disabled">
                <el-form-item prop="xuxm" :label="formMap['xuxm']">
                    {{formData.xuxm}}
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="disabled">
                <el-form-item prop="xtime" :label="formMap['xtime']">
                    {{formData.xtime}}
                </el-form-item>
            </el-col>
            <el-col :span="24" align="center" v-if="!disabled">
                <el-button type="primary" class="form-btn" @click="submit">提 交</el-button>
            </el-col>
        </el-form>
    </el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="static/vue.js"></script>
<!-- import JavaScript -->
<script src="static/index.js"></script>
<script src="static/axios.min.js"></script>
<script>
    var pageparm = getQueryString("pageparm"),
        formMap = {
            xmdm: '项目代码',
            alid: '案例id',
            almc: '案例名称',
            documents: '案例材料',
            cllx: '材料类型',
            clmc: '材料名称',
            docfile: 'doc文档',
            pdffile: 'pdf文档',
            clsm: '说明',
            qxdmmc: '案例区县名称',
            xxdmmc: '案例学校名称',
            xuid: '用户id',
            xuxm: '用户姓名',
            xtime: '更新时间'
        };
    new Vue({
        el: '#app',
        data: function () {
            var that = this, validate = [
                {
                    required: true,
                    validator(filed, val, callback) {
                        if (!val) {
                            callback(new Error(formMap[filed.fullField] + '不能为空'))
                        }
                        callback()
                    },
                    trigger: 'blur'
                }
            ]
            return {
                title: '案例信息',
                type: getQueryString("type"),
                formMap,
                baseUrl,
                pzluserid: '',
                fileData: {
                    act: 'afileid',
                    alid: getQueryString("alid")
                },
                types: {
                    cllxs: []
                },
                projectCodes: [],
                formData: {
                    xmdm: '', // 项目代码
                    alid: '', // 案例id
                    almc: '', // 案例名称
                    qxdmmc: '',// 案例区县名称
                    xxdmmc: '',// 案例学校名称
                    xuid: '',// 用户id
                    xuxm: '',// 用户姓名
                    xtime: ''// 更新时间
                },
                rules: {
                    xmdm: validate, // 项目代码
                    almc: validate // 案例名称
                }
            }
        },
        computed: {
            disabled () {
                return this.type !== 'modify' && this.type !== 'add'
            }
        },
        methods: {
            back (){
                history.back()
            },
            getProjects () {
                let that = this
                axios.get(baseUrl + 'PSAL/PSALDETAI', {params: {act: 'pinit'}}).then(function (res) {
                    if (res.status === 200) {
                        that.projectCodes = res.data.xmlist
                        that.pzluserid = res.data.pzluserid
                        that.title = res.data.mkmc || that.title
                        document.title = that.title
                    }
                })
            },
            submit() {
                var that = this
                this.$refs.form.validate(function (flag) {
                    if (flag) {
                        var params = {
                            xmdm: that.formData.xmdm,
                            almc: that.formData.almc,
                            pzluserid: that.pzluserid,
                            act: that.type
                        }
                        if (that.type === 'modify') {
                            params.pageparm = that.fileData.alid
                        }
                        axios.get(baseUrl + 'PSAL/PSALDETAI', {params}).then(function (res) {
                            if (res.status === 200) {
                                if (params.act === 'add') {
                                    location.href = './PSALDETAIDOC.html?alid=' + res.data.alid + '&type=add&redir=' + getQueryString('redir')
                                } else {
                                    history.back()
                                }
                            }
                        })
                    }
                })
            },
            getTypes (type) {
                let that = this
                return axios.get(baseUrl + 'xctrl/getdmjson/' + type).then(function (res) {
                    if (res.status === 200) {
                        that.types[type.split('-')[1] + 's'] = res.data
                    }
                })
            },
            getInitData () {
                let that = this
                axios.get(baseUrl + 'PSAL/PSALDETAI', {params: {act: 'rdata', pageparm: that.fileData.alid}}).then(function (res) {
                    if (res.status === 200) {
                        for (var key in res.data[0]) {
                            if (res.data[0].hasOwnProperty(key)) {
                                that.formData[key.toLowerCase()] = res.data[0][key]
                            }
                        }
                    }
                })
            },
        },
        created() {
            this.getTypes('anli-cllx')
            this.getProjects()
            if (this.type !== 'add') {
                this.getInitData()
            }
        }
    })
</script>

</html>